import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 当前任务id
    id: 0,
    // 所有任务列表
    content: [],
    // 控制展示视图的key
    viewKey: 'all'
  },
  getters: {
    // 统计当前未完成的任务数
    unDoneLeng(state) {
      return state.content.filter((i) => i.done === false).length
    },
    // 修改视图展示数据
    infolist(state) {
      switch (state.viewKey) {
        case 'all':
          return state.content
        case 'undone':
          return state.content.filter((i) => !i.done)
        case 'done':
          return state.content.filter((i) => i.done)
        default:
          return state.content
      }
    }
  },
  mutations: {
    // 添加任务方法
    receiveAddContent(state, content) {
      const obj = {
        id: state.id,
        info: content,
        done: false
      }
      state.id++
      state.content.push(obj)
    },
    // 根据id清除对应任务方法
    clearById(state, id) {
      // for (const index in state.content) {
      //   if (state.content[index].id === id) {
      //     state.content.splice(index, 1)
      //   }
      // }
      // 根据id查找索引
      const index = state.content.findIndex((i) => i.id === id)
      if (index === -1) return
      // 根据索引删除对应任务
      state.content.splice(index, 1)
    },
    // 清除所有任务方法
    clearBoth(state) {
      // 判断当前是否有任务内容
      if (!state.content.length) return
      // 清空任务
      state.content = []
    },
    // 监听复选框的状态
    cbStatusChanged(state, { e, id }) {
      const index = state.content.findIndex((i) => i.id === id)
      // 接收到最新的选中状态并更改state中的状态
      if (index !== -1) {
        state.content[index].done = e.target.checked
      }
    },
    // 修改视图的关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  },
  actions: {},
  modules: {}
})
